<script setup lang='ts'>
import { RouterView, RouterLink } from "vue-router";
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>

<template>
    <div class="h"></div>
    <div class="contnetpc">
        <div class="row">
            <el-col :span="12">
                <el-menu default-active="1-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <location />
                            </el-icon>
                            <span>信息管理</span>
                        </template>
                        <el-menu-item-group title="我的信息">
                            <RouterLink :to="{ name: 'uuserData', query: { isrouter: 2 } }">
                                <el-menu-item index="1-1">账号信息</el-menu-item>
                            </RouterLink>
                            <el-menu-item index="1-2" disabled>在线客服（功能开发中）</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <RouterLink :to="{ name: 'userLvek', query: { isrouter: 2 } }">
                        <el-menu-item index="2">
                            <el-icon><icon-menu /></el-icon>
                            <span>我的喜爱</span>
                        </el-menu-item>
                    </RouterLink>
                    <RouterLink :to="{ name: 'collect', query: { isrouter: 2 } }">
                        <el-menu-item index="3">
                            <el-icon>
                                <document />
                            </el-icon>
                            <span>我的收藏</span>
                        </el-menu-item>
                    </RouterLink>
                    <RouterLink :to="{ name: 'trade', query: { isrouter: 2 } }">
                        <el-menu-item index="4">
                            <el-icon>
                                <setting />
                            </el-icon>
                            <span>交易明细</span>
                        </el-menu-item>
                    </RouterLink>

                </el-menu>
            </el-col>
        </div>
        <div class="data">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<style scoped>
.h {
    height: 20px;
}

.contnetpc {
    max-width: 1500px;
    min-height: 800px;
    margin: auto;
    margin-top: 60px;
    display: grid;
    grid-template-columns: 20% 78%;
    gap: 2%;
}

.row {
    background-color: white;
}

.data {
    background-color: white;
}

:deep(.el-col-12) {
    max-width: 100% !important;
}
</style>